<!-- 动态 头像 -->
<template>
  <div class="activity-item-head">
    <van-image
      :src="props.url"
      :style="{ width: props._width, height: props._height }"
      fit="cover"
    />
    <div class="activity-item-name">
      <div class="activity-item-name-label">
        <h4 :style="{ fontSize: _titleFsize }">{{ props.name }}</h4>
        <div class="labels" v-if="isLabel">
          <span
            :style="{ background: props.labelsColor[1], fontSize: _fontSize }"
            >{{ props.labelsName }}</span
          >
          <!-- <span :style="{ background: props.labelsColor[2] }">一条鱼</span>
        <span :style="{ background: props.labelsColor[3] }">一条鱼</span>
        <span :style="{ background: props.labelsColor[0] }">一条鱼</span>
        <span :style="{ background: props.labelsColor[4] }">一条鱼</span> -->
        </div>
      </div>
      <div
        class="activity-item-name-follow"
        :class="props.isFollow ? 'activity-item-name-follow-true' : ''"
        @click="followAnchor"
      >
        <van-icon v-if="!props.isFollow" name="plus" /><span>{{
          props.isFollow ? "取消关注" : "关注"
        }}</span>
      </div>
    </div>
  </div>
</template>
  <script setup>
import { reactive, toRefs } from "vue";

import { useRoute, useRouter } from "vue-router";

import { UpdateFollow } from "@/api/index";
import { showToast } from "vant";

const props = defineProps({
  _width: {
    type: String,
    default: "40px",
  },
  _height: {
    type: String,
    default: "40px",
  },
  _titleFsize: {
    type: String,
    default: "16px",
  },
  _fontSize: {
    type: String,
    default: "13px",
  },
  isLabel: {
    type: Boolean,
    default: true,
  },
  labelsColor: {
    type: Array,
    default: () => {
      return ["#ff5e95", "#feac20", "#21e4e0", "#9670ff", "#ff7ca0", "#4ea9fc"];
    },
  },
  name: {
    type: String,
    default: "",
  },
  url: {
    type: String,
    default: "",
  },
  labelsName: {
    type: String,
    default: "",
  },
  anchorId: {
    type: String,
    default: "",
  },
  isFollow: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["updateFollow"]);

const route = useRoute();

const state = reactive({});

const { tabsList, labelsColor } = toRefs(state);
const router = useRouter();

// 关注主播
const followAnchor = async () => {
  let params = {
    id: Number(props.anchorId),
    isFollow: !props.isFollow,
  };
  let data = await UpdateFollow(params);
  let msg = !props.isFollow ? "关注成功" : "取消关注";
  showToast(msg);
  console.log(!props.isFollow);

  emits("updateFollow", !props.isFollow);
};
</script>  

<style lang="scss" scoped>
.activity-item-head {
  display: flex;
  align-items: center;
  .van-image {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 32px;
    overflow: hidden;
    flex: none;
  }
  .activity-item-name {
    h4 {
      font-size: 14px;
      font-weight: normal;
    }
    .labels {
      display: flex;
      align-items: center;
      span {
        display: block;
        margin-right: 5px;
        font-size: 10px;
        font-weight: normal;
        color: #fff;
        padding: 0 5px;
        border-radius: 4px;
        line-height: 1.5;
        background: $default-color-l5;
      }
    }
  }
}
.activity-item-name {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
  